<template>
  <div class="home">
    <div class="right">
      <el-carousel height="530px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.idView" class="image" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="left">
      <el-divider></el-divider>
      <span>白日莫闲过，青春不再来</span>
      <el-divider></el-divider>
      <span>他们都假装颓废，你可别上当</span>
      <el-divider></el-divider>
      <div class="fn">
        <el-row>
          <el-col :span="20">
            <el-card :body-style="{ padding: '0px' }">
              <div class="fn-card" style="padding: 14px;">
                <span>个人信息</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="toPeopleMessage">快捷入口</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="20" style="margin-top: 15px">
            <el-card :body-style="{ padding: '0px' }">
              <div class="fn-card" style="padding: 14px;">
                <span>考试信息</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="toTestMessage">快捷入口</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="20" style="margin-top: 15px">
            <el-card :body-style="{ padding: '0px' }">
              <div class="fn-card" style="padding: 14px;">
                <span>公共平台</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="toPublicPlatform">快捷入口</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="20" style="margin-top: 15px">
            <el-card :body-style="{ padding: '0px' }">
              <div class="fn-card" style="padding: 14px;">
                <span>添加班级</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="dialogVisible = true">点击添加</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
        title="输入班级邀请码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>
        <el-input v-model="testPaperCode" placeholder="请输入内容"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addClass">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import {joinClass} from "../../api/data";

export default {
  name: "home",
  data() {
    return {
      dialogVisible: false,
      testPaperCode: '',
      imgList: [
        {id:0,idView:require('../../src/assets/images/img1.png')},
        {id:1,idView:require('../../src/assets/images/img2.png')},
        {id:2,idView:require('../../src/assets/images/img3.png')},
        {id:3,idView:require('../../src/assets/images/img4.png')}
      ],
      screenWidth :0
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
    },
    toPeopleMessage(){
      this.$router.replace('/peopleMessage')
    },
    toTestMessage(){
      this.$router.replace('/testMessage')
    },
    toPublicPlatform(){
      this.$router.replace('/publicPlatform/questionGroup')
    },
    addClass(){
      let data={classCode: this.testPaperCode}
      joinClass(JSON.stringify(data)).then((params)=>{
        if(params.data.code===0){
          this.$message({
            message: params.data.msg,
            type: 'success'
          });
        }else if(params.data.code===1){
          this.$message.error(params.data.msg);
        }
      })
      this.dialogVisible = false
    },
    setSize(){
      this.bannerHeight = 400 / 950 * this.screenWidth;
    }
  },
  mounted() {
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    }
  }
}
</script>

<style lang="less" scoped>
img{
  width: 100%;
  height: inherit;
}
.home{
  background:url('../../src/assets/images/home.png');
  background-size:100% 100%;
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: white;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: pink;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
<style lang="less">
.el-main{
  padding: 0;
}
.right{
  float: left;
  margin-top: 50px;
  margin-left: 2%;
  width: 60%;
}
.left{
  float: left;
  margin-left: 3%;
  width: 30%;
}
.fn{
  margin-top: 35px;
}
</style>
